<script setup>
import { GetMenuPageAPI } from '@/api/system/printConfig'
const { proxy } = getCurrentInstance()
// 封装 方法 字典查询
const { sys_print_type } = proxy.useDict('sys_print_type')

const newRef = ref(null)

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  disabled: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  }
})

//  树结构 页面数据
const menuPage = ref([])

// 新增表单 字段
const addForm = reactive({
  printName: '', // 打印名称
  printType: '', // 打印类型
  printCorrelation: '' // 关联位置
})

// 新增表单 校验规则
const addrules = reactive({
  printName: [{ required: true, message: '请选择打印名称', trigger: 'change' }],
  printType: [{ required: true, message: '请选择打印类型', trigger: 'change' }],
  printCorrelation: [{ required: true, message: '请选择关联位置', trigger: 'change' }]
})

// 提交数据
const submit = () => {
  return new Promise((resolve, reject) => {
    newRef.value.validate(valid => {
      if (!valid) {
        proxy.warningMsg('请填写完整')
        resolve(false)
      } else {
        resolve(addForm)
      }
    })
  })
}

//
const handleChange = val => {
  addForm.printCorrelation = val[val.length - 1]
}

// 获取列表
const getMenuPage = async () => {
  try {
    const res = await GetMenuPageAPI()
    menuPage.value = res.data
  } catch (error) {
  } finally {
  }
}

getMenuPage()
watch(
  () => props.data,
  val => {
    if (val?.printId) {
      for (let key in val) {
        addForm[key] = val[key]
      }
    }
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({ submit })
</script>

<template>
  <div>
    <!-- 新增 表单 -->
    <el-form
      :model="addForm"
      label-width="120px"
      class="demo-ruleForm flex"
      :rules="addrules"
      status-icon
      inline
      ref="newRef"
    >
      <div>
        <el-form-item label="模板名称" prop="printName">
          <el-input :disabled="props.disabled" v-model="addForm.printName" :suffix-icon="Search" @click="out" />
        </el-form-item>
        <el-form-item label="模板类型" prop="printType">
          <el-select :disabled="props.disabled" v-model="addForm.printType" placeholder="请选择模板类型">
            <el-option v-for="item in sys_print_type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联位置" prop="printCorrelation">
          <el-cascader
            v-if="props.title == '新增'"
            v-model="addForm.printCorrelations"
            :options="menuPage"
            :props="{
              label: 'menuName',
              value: 'menuId',
              children: 'children'
            }"
            @change="handleChange"
          />
          <el-input v-else v-model="addForm.printCorrelationName" disabled />
        </el-form-item>
      </div>
      <div v-if="props.title == '查看'">
        <PrintView ref="printViewRef" :templateId="addForm.printId" :printData="ruleForm" />
      </div>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
